<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax Form Example 2</title>

<style type="text/css">
* {margin:0;padding:0}
body {
  background-color:white;
  font:normal normal 16px Times,Serif;
  color:black;
  padding:50px 50px;
}
#ajax-search-form {
  position:relative;
  font:normal normal 13px Arial,Sans-Serif;
}
#ajax-search-form a {
  color:#741F27;
  text-decoration:none;
}
#ajax-search-form input {
  border:1px solid #ccc;
  background-color:white;
  font:normal normal 12px/100% Arial,Sans-Serif;
  color:black;
  margin:0 0;
  padding:5px 5px;
  border-top-color:#999;
  width:180px;
}
#ajax-search-form input[type="submit"] {
  width:auto;
  background-color:#084670;
  border:none;
  color:#B4D8F0;
  font-weight:bold;
  cursor:pointer;
}
#ajax-search-form input[type="submit"]:hover,
#ajax-search-form input[type="submit"]:focus {
  background-color:#083E5F;
}
#search-result {
  border:1px solid #bbb;
  background-color:white;
  padding:10px 15px;
  margin:2px 0;
  width:auto;
  height:auto;
  position:absolute;
  top:100%;
  left:0;
  z-index:99;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  display:none;
}
#search-result * {
  margin:0 0 0 0;
  padding:0 0 0 0;
}
#search-result h4,
#search-result strong {
  display:block;
  margin:0 30px 10px 0;
}
#search-result ol {margin:0 0 10px 28px}
#search-result ol a:hover {text-decoration:underline}
#search-result .close {
  display:block;
  position:absolute;
  top:6px;
  right:10px;
  line-height:normal;
  color:#17950F;
}
#search-result strong {color:#B75252}
</style>

</head>
<body>

<form action="/search" id="ajax-search-form">
	<input type="text" name="q"> <input type="submit" value="Search">
</form>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
(function($) {
	var $form = $('#ajax-search-form'),
		$input = $form.find(':text');
	$form.append('<div id="search-result"></div>');
	var $result_container = $('#search-result');
	$form.on("submit", function() {
		var keyword = $input.val();
		$result_container.show().html('Loading...');
		$.ajax({
			url: 'http://leodacosta.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
			type: 'get',
			dataType: 'jsonp',
			success: function(json) {
				var entry = json.feed.entry,
					link, skeleton = "";
				if (entry !== undefined) {
					skeleton = '<h4>Search results for keyword &quot;' + keyword + '&quot;</h4>';
					skeleton += '<a class="close" href="/">&times;</a><ol>';
					for (var i = 0; i < entry.length; i++) {
						for (var j = 0; j < entry[i].link.length; j++) {
							if (entry[i].link[j].rel == "alternate") {
								link = entry[i].link[j].href;
							}
						}
						skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
					}
					skeleton += '</ol>';
					$result_container.html(skeleton);
				} else {
					$result_container.html('<a class="close" href="/">&times;</a><strong>No result!</strong>');
				}
			},
			error: function() {
				$result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
			}
		});
		return false;
	});
	$form.on("click", ".close", function() {
		$result_container.fadeOut();
		return false;
	});
})(jQuery);
</script>

</body>
</html>